<template>

	<view class="shop-page">
		<image class="shop-bk" src="@/static/images/index/cards/card3.png"></image>
		<image class="header-back-icon" @click="page_back" src="@/static/images/common/back.png"></image>
		<view class="shop-container">
			<view class="shop-info">
				<view class="shop-name">{{ shop_data.shop_name }}</view>
				<view class="shop-rating">
					<image class="shop-stars" src="@/static/images/shop/star.png" v-for="i in star_cnt"></image>
					<text class="shop-rates">{{ shop_data.shop_rating }}</text>
				</view>
				<view class="shop-where">
					<text class="shop-fee">配送费: {{ shop_data.delivery_fee }}元</text>
					<text class="shop-work-hour">营业时间: {{ shop_data.busy_hours }}</text>
					<text class="shop-addr">{{ shop_data.shop_addr }} </text>
				</view>
			</view>
			<view class="shop-content">
				
				<view class="shop-nav">
					<view :class="pageClass[0]" @click="turnPage(1)">点菜</view>
					<view :class="pageClass[1]" @click="turnPage(2)">评价</view>
				</view>
				
				<view class="shop-body">
					<view class="shop-page-order" v-show="pageShow[0]">
						<view class="dish-item" v-for="dish in dish_data">
							<view class="dish-item-pic"><image src="@/static/images/common/dish_default.png"></image></view>
							<view class="dish-item-info">
								<view class="dish-name">【{{ dish.dish_name }}】</view>
								<view class="dish-tags">
									<!-- <view class="dish-tag" v-for="dishTag in dish.flavorTags">{{dishTag}}</view> -->
									<view class="dish-intro">{{ dish.dish_intro }}</view>
								</view>
								<view class="dish-add-to-cart">
									<view class="dish-price">￥{{dish.dish_price}}</view>
									<view class="dish-cart-cnt">
										<image class="dish-decline" @click="dish_dec(dish.dish_id)" src="@/static/images/shop/decline.png"></image>
										<text class="dish-cnt">{{ getDishCnt(dish.dish_id) }}</text>
										<image class="dish-add" @click="dish_add(dish.dish_id)" src="@/static/images/shop/add.png"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="shop-page-comment" v-show="pageShow[1]">
						评论
					</view>
				</view>
			</view>
		</view>

	</view>

	<view class="cart-container">
		<image class="cart-icon" src="/static/images/common/cart.png"></image>
		<text class="cart-text">到手约: {{ cart_data.total_pay }}元</text>
		<view class="cart-btn">
			<image class="cart-to-cart" src='@/static/images/common/add_to_cart.png' @click="handleToCart"></image>
			<text class="cart-deal" @click="handleToDeal">去结算</text>
		</view>
	</view>

</template>

<script setup>
	import { onMounted, reactive, toRaw, ref, watch } from 'vue'
	import { httpGet, httpPost } from '@/utils/request.js'
	import { listCopy, page_back, toast, showLoading, hideLoading } from '@/utils/main.js'
	import { read_storage, write_storage } from '@/utils/storage.js'
	
	const default_data = {
		"cart_data": {
			"shop_id": "",
			"cart_id": "",
			"cart_data": [],
			"total_pay": 0
		},
		"shop_data": {
			"shop_name": "店名",
			"shop_rating": 5.0,
			"delivery_fee": 0.00,
			"busy_hour": "00:00-24:00",
			"shop_addr": "默认地址"
		},
		"dish_data": [
			{
				"dish_name": "菜名",
				"dish_intro": "菜品介绍",
				"dish_id": 0
			}
		],
		"saved_cart_data": []
	}
	const props = defineProps(["shop_id"])
	const star_cnt = ref(0)
	
	const cart_data = reactive(default_data.cart_data)
	const shop_data = reactive(default_data.shop_data)
	const dish_data = reactive(default_data.dish_data)
	const saved_cart_data = reactive(default_data.saved_cart_data)
	
	function fetchData() {
		showLoading()
		// fetch shop_data dish_data
		httpGet("/api/get_shop", {"shop_id": props.shop_id})
		.then((res) => {
			// shop_data
			Object.assign(shop_data, res.data.data.shop_data) 
			// dish_data
			listCopy(dish_data, res.data.data.dish_data) 
			// saved_cart_data
			const temp = read_storage("cart_data")
			if (temp) listCopy(saved_cart_data, temp)
			// ----- init star_cnt -----
			star_cnt.value = Math.floor(shop_data.shop_rating)
			init_cart()
		}).finally(()=>{hideLoading()})
	}
	onMounted(() => { fetchData() })

	function init_cart() { 
		// ----- init cart_data -----
		cart_data.shop_id = props.shop_id
		cart_data.cart_id = saved_cart_data.length+1
		for (let i=0; i<dish_data.length; ++i) {
			// cart_data
			const cart_dish = {
				"dish_id": dish_data[i].dish_id,
				"quantity": 0
			}
			cart_data.cart_data.push(cart_dish) // TODO 没有将数量重置为0 reset / push
		}
	}

	function getDishCnt(_dish_id) {
		for (let i of cart_data.cart_data) {
			if (i.dish_id == _dish_id) { return i.quantity }
		}
		return 0
	}

	// const cart_icon_path = ref("/static/images/common/cart.png")

	// ----- ----- ----- page ----- ----- -----
	const page = ref(1)
	const pageClass = reactive([
		["shop-nav-item", "shop-page-under"],
		["shop-nav-item"]
	])
	const pageShow = reactive([true, false])
	watch(page, (newPage)=>{
		const pageSize = pageShow.length
		pageShow.slice(0, pageSize)
		for (let i=0; i<pageSize; ++i) {
			if (newPage-1 == i) {
				pageShow[i]=true
				pageClass[i].push('shop-page-under')
			}
			else {
				pageShow[i]=false
				pageClass[i] = pageClass[i].filter(cls => cls !== "shop-page-under");
			}
		}
	}) 
	const turnPage = (_page) => { page.value = _page }
	// ----- ----- ----- page ----- ----- -----
	
	// ----- ----- ----- cart ----- ----- -----
	
	function dish_dec(_dish_id) {
		// 数量-1
		for (let i=0; i<cart_data.cart_data.length; ++i) {
			if (cart_data.cart_data[i].dish_id == _dish_id && 
				cart_data.cart_data[i].quantity >= 1) {
				--cart_data.cart_data[i].quantity
			}
		}
		// 费用-
		dish_data.find(dish => {
			if (dish.dish_id == _dish_id && cart_data.total_pay !=0) {//不严谨
				cart_data.total_pay -= parseFloat(dish.dish_price)
			}
		})
	}
	
	function dish_add(_dish_id) {
		// 数量
		for (let i=0; i<cart_data.cart_data.length; ++i) {
			if (cart_data.cart_data[i].dish_id == _dish_id) {
				++cart_data.cart_data[i].quantity;
			}
		}
		// 费用+
		dish_data.find(dish => {
			if (dish.dish_id == _dish_id) { 
				cart_data.total_pay += parseFloat(dish.dish_price)
			}
		})
	}
	
	function handleToCart() {
		showLoading()
		saved_cart_data.push(cart_data)
		write_storage("cart_data", saved_cart_data)
		init_cart()
		hideLoading()
		toast("成功添加至购物车!")
		console.log("saved_cart_data: ", saved_cart_data)
	}
	
	function handleToDeal() {
		toast("跳转到订单界面")
		console.log("假装完成了跳转订单之前的验证+选中了至少一样菜品")
		console.log("点击跳转到订单页面")
	}
</script>

<style>
	@import url("@/static/styles/shop/shop.scss");
	.header-back-icon {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 30rpx;
		top: 40rpx;
	}
</style>
